<template>
  <div ref="$wrapper" :class="{active: isActive}" :style="wrapperStyle">
    <template v-if="mode==='horizontal'">
      <div class="bai-split-trigger-horizontal">
        <div class="trigger-btn">
          <i class="dot" v-once v-for="i in 3" :key="`trigger-${i}`"></i>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="bai-split-trigger-vertical">
        <div class="trigger-btn">
          <i class="dot" v-once v-for="i in 3" :key="`trigger-${i}`"></i>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
// 声明额外的选项
export default {
  name: 'Trigger',
}
</script>

<script setup>
import {defineProps, ref, computed, onMounted, onBeforeUnmount, nextTick} from 'vue'
import { oneOf } from '../utils/index'

const props = defineProps({
  mode: {
    validator (value) {
      return oneOf(value, ['horizontal', 'vertical']);
    },
    default: 'horizontal'
  }
})
const isActive = ref(false)
const mode = computed(() => props.mode)
const wrapperStyle = computed(() => {
  return {
    width: mode.value === 'horizontal'? 'unset': '100%',
    height: mode.value === 'horizontal'? '100%': 'unset'
  }
})
const active = () => {
  isActive.value = true
}
const deActive = () => {
  isActive.value = false
}

const $wrapper = ref(null)
const mouseUp = (e) => {
  let x = e.clientX
  let y = e.clientY
  let left = $wrapper.value.offsetLeft
  let right = $wrapper.value.offsetLeft + $wrapper.value.offsetWidth
  let top = $wrapper.value.offsetTop;
  let bottom = $wrapper.value.offsetTop + $wrapper.value.offsetHeight;
  if( ((x>=left)&&(x<=right))&&((y>=top)&&(y<=bottom)) ){
    active()
  }else{
    deActive()
  }
  $wrapper.value.addEventListener("mouseout", deActive)
  window.removeEventListener("mouseup", mouseUp)
}
const mouseDown = () => {
  active()
  $wrapper.value.removeEventListener("mouseout", deActive)
  window.addEventListener("mouseup", mouseUp)
}
const init = () => {
  $wrapper.value.addEventListener("mouseover", active)
  $wrapper.value.addEventListener("mouseout", deActive)
  $wrapper.value.addEventListener("mousedown", mouseDown)
}
onMounted(() => {
  nextTick(() => {
    init()
  })
})
onBeforeUnmount(() => {
  $wrapper.value.removeEventListener("mouseover", active)
  $wrapper.value.removeEventListener("mouseout", deActive)
  $wrapper.value.removeEventListener("mousedown", mouseDown)
})

</script>

<style scoped lang="sass">
  .bai-split-trigger-horizontal
    width: 6px
    height: 100%
    background-color: #f8f8f9
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    border-width: 0 1px
    border-style: solid
    border-color: #d6d6d6
    cursor: col-resize

    .trigger-btn
      height: 50px
      width: 100%
      background-color: #d6d6d6
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      border-radius: 3px
      i
        display: inline-block
        margin-top: 8px
        border-radius: 2px
        height: 4px
        width: 4px
        background-color: #fff
        &:first-child
          margin-top: 0

  .bai-split-trigger-vertical
    height: 6px
    width: 100%
    background-color: #f8f8f9
    display: flex
    justify-content: center
    align-items: center
    border-width: 1px 0
    border-style: solid
    border-color: #d6d6d6
    cursor: row-resize

    .trigger-btn
      width: 50px
      height: 100%
      background-color: #d6d6d6
      display: flex
      justify-content: center
      align-items: center
      border-radius: 3px
      i
        display: inline-block
        margin-left: 8px
        border-radius: 2px
        height: 4px
        width: 4px
        background-color: #fff
        &:first-child
          margin-left: 0

  .active
    .bai-split-trigger-vertical, .bai-split-trigger-horizontal
      background-color: #818181
      border-color: #444
      .trigger-btn
        background-color: #444

</style>
